<template>
  <div class="leftChannel_box">
    <div class="top_title">目录</div>
    <div class="top_search">
      <el-input
        width="260"
        placeholder="菜单目录"
        prefix-icon="el-icon-search"
        v-model="searchValue"
        @input="valueChanged"
      >
      </el-input>
    </div>
    <div class="main_box">
      <el-tree
        ref="tree"
        node-key="id"
        :highlight-current="true"
        :data="treeData"
        :props="defaultProps"
        :filter-node-method="filterNode"
        @node-click="handleNodeClick"
      >
      </el-tree>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      /* 请求接口 */
      microservices: "function-base-data",
      resource: "Dictionary",
      searchValue: "", // 查询字段
      currentItem: null, // 选中的数据
      defaultProps: {
        label: "localeTitle",
      },
      dictionaryTreeData: [], // 源数据
      menuItems: JSON.parse(sessionStorage.getItem("navigation")).filter(
        (f) => f.title != "动态字段"
      ),
      dataSource: [],
    };
  },
  computed: {
    treeData() {
      return this.convertToTree(this.menuItems);
    },
  },
  mounted() {
  },
  methods: {
    // 树转换
    convertToTree(data) {
      // 创建一个映射表，便于快速查找节点
      const nodeMap = new Map(
        data.map((item) => [item.id, { ...item, children: [] }])
      );
      // 遍历数据，构建树结构
      data.forEach((item) => {
        if (item.parent && typeof item.parent === "object") {
          const parentNode = nodeMap.get(item.parent.id);
          if (parentNode) {
            parentNode.children.push(nodeMap.get(item.id));
          }
        }
      });

      // 返回根节点（即parent为null的节点）
      return Array.from(nodeMap.values())
        .filter((node) => node.parent === null)
        .map((rootNode) => ({
          ...rootNode,
          children: rootNode.children.filter((child) => child !== undefined),
        }));
    },
    // 加载数据
    loadData() {
      this.$server()
        .custom(
          this.microservices,
          "material/selectsMaterialTree",
          this.search,
          null,
          null
        )
        .then((res) => {
          console.log(res);
          // let tree = [];
          // res.forEach((item) => {
          //   if (!item.parentId) {
          //     item.children = [];
          //     item.showName = item.materialName;
          //     tree.push(item);
          //   } else {
          //     let index = tree.findIndex((el) => el.id == item.parentId);
          //     item.showName = item.materialName + "(" + item.materialCode + ")";
          //     tree[index].children.push(item);
          //   }
          // });
          this.dictionaryTreeData = this.menuItems;
          console.log(this.dictionaryTreeData);
        })
        .catch((error) => {
          console.log(error);
          this.$message.error(error.data.message);
        });
    },
    //节点点击
    handleNodeClick(data, node) {
      if (node.isLeaf) {
        this.currentItem = data;
        this.$emit("handleItemClick", data);
      }
    },
    // 查询数据
    valueChanged() {
      this.$refs.tree.filter(this.searchValue);
    },
    filterNode(value, data) {
      if (!value) return true;
      return (
        data.title.indexOf(value) !== -1 ||
        data.localeTitle.indexOf(value) !== -1
      );
    }
  },
};
</script>

<style lang="scss" scoped>
.leftChannel_box {
  box-sizing: border-box;
  height: 100%;
  padding: 20px 0px;
  .top_title {
    padding: 0px 20px;
    line-height: 28px;
    font-size: 16px;
    font-weight: bold;
  }
  .top_search {
    padding: 0px 20px;
    margin: 8px 0px;
    ::v-deep .dx-texteditor.dx-editor-outlined {
      border-radius: 15px;
    }
  }
  .main_box {
    box-sizing: border-box;
    height: calc(100% - 80px);
    padding: 0 20px 10px 20px;
    overflow-y: auto;
  }

  .main_box::-webkit-scrollbar {
    width: 8px; /* 定义滚动条宽度 */
    display: unset;
  }
  .main_box::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #d2d2d2;
  }
  .main_box::-webkit-scrollbar-track {
    border-radius: 8px;
    background-color: #e7e7e700;
    border: 1px solid #cacaca00;
  }
}
</style>
